<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/main/main.css" rel="stylesheet" />
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <style>
        body {
            background-image: url("../image/5710000090.jpg");
            background-size: fixed;
        }

        .body {
            height: 99%;
        }
    </style>
</head>

<body>
    <div class="body">
        <main id="main" class="main"></main>
        <div id="menu" class="menu">
            <div class="menu-button menu-list1 menu-element" data-type="code">
                <!-- <embed src="image/svg/app.svg" type="image/svg+xml" class="svg-pic" />  -->
                <img src="../image/svg/app.png" class="svg-pic" />
            </div>
            <div class="menu-button menu-list2 menu-element" data-type="cloud">
                <!-- <embed src="image/svg/cloud.svg" type="image/svg+xml" class="svg-pic" />  -->
                <img src="../image/svg/cloud.png" class="svg-pic" />
            </div>
            <div class="menu-button menu-list3 menu-element" data-type="read">
                <img src="../image/svg/read.png" class="svg-pic" />
            </div>
            <div class="menu-button menu-list4 menu-element" data-type="fun">
                <!-- <embed src="image/svg/happy.svg" type="image/svg+xml" class="svg-pic" />  -->
                <img src="../image/svg/happy.png" class="svg-pic" />
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <script src="../js/main/main.data.js"></script>
    <script>
        var fun = 0        
        $(".menu-element").on('click', function () {
            type = $(this).data('type')
            // console.log('click', type)

            if (type == 'fun') {
                fun++
            }else{
                fun = 0                
            }
            if (type == 'fun') {
                insertData(list.fun)
            } else if (type == 'code') {
                insertData(list.code)
            } else if (type == 'cloud') {
                insertData(list.cloud)
            } else if (type == 'read') {
                insertData(list.read)
            }
            if(fun>2){
                window.location = 'refreshData.html'
            }
        })

        function insertData(lists) {
            temp = '<div class="row">'
            count = 0
            lists.forEach(function (value) {
                count++
                // console.log(value.title, value.url)
                temp += '<div class="col-md-' + config.colNum + '" style="width=50%;">' +
                    '<a href="' + value.url + '" style="text-decoration: none;">' +
                    '<div class="box"><div class="text">' + value.title + '</div></div></div></a>'
                if (count % config.col == 0) {
                    temp += '</div><div class="row">'
                }
            })
            temp += '</div>'
            $("#main").html(temp)
        }
        $(function () {
            insertData(list.code)
        });
    </script>
</body>

</html>